import React from 'react'
import './CssDisplayer.less'

export default function CssDisplayer(props) {
  return (
    <div>
      {
        props.styles.map(it => (
          <div className="styles" key={ it.selector }>
            <span className="selector">{ it.selector}</span>
            <span className="brackets">{ '{' }</span>
            {
              it.styles.map(s => (
                <span className={"group" + (s.disabled? ' disabled': '')} key={ s.field + s.value }>
                  <span className="key">{ s.field }</span>
                  <span className="colon">: </span>
                  <span className="value">{ s.value }</span>
                  <span className="branch">;</span>
                </span>
              ))
            }
            <span className="brackets">{ '}' }</span>
          </div>
        ))
      }
    </div>
  )
}
